<template>
	<div>
		<div class="container">
				<el-row>
					<el-col :span="4" style="height: 100vh;"></el-col>
				 <el-col :span="4" style="height: 100vh;position: fixed;">
				    <el-menu
				      default-active="2"
				      class="el-menu-vertical-demo"
				      @open="handleOpen"
				      @close="handleClose"
				      background-color="#3a6459"
				      text-color="#fff"
				      active-text-color="#ffd04b"
					 style="min-height: 100%" 
					   router>
				      <el-menu-item index="index">
				        <template slot="title">
				          <i class="el-icon-location"></i>
				          <span>首页</span>
				        </template>
				      </el-menu-item>
					  
				      <el-submenu index="2">
				        <template slot="title">
				          <i class="el-icon-location"></i>
				          <span>数据管理</span>
				        </template>
						<el-menu-item index="userlist">用户列表</el-menu-item>
						  <el-menu-item index="Blist">商家列表</el-menu-item>
						  <el-menu-item index="foodlist">食品列表</el-menu-item>
						  <el-menu-item index="orderlist">订单列表</el-menu-item>
						  <el-menu-item index="managerlist">管理员列表</el-menu-item>
				      </el-submenu>
					  
				      <el-submenu index="3">
				        <template slot="title">
				          <i class="el-icon-location"></i>
				          <span>添加数据</span>
				        </template>
						<el-menu-item index="addStore">添加商铺</el-menu-item>
						<el-menu-item index="addGoods">添加商品</el-menu-item>
				      </el-submenu>
					  
				      <el-submenu index="4">
				        <template slot="title">
				          <i class="el-icon-location"></i>
				          <span>图表</span>
				        </template>
				      	<el-menu-item index="chart">用户分布</el-menu-item>
				      </el-submenu>
					  
					  <el-submenu index="5">
					    <template slot="title">
					      <i class="el-icon-location"></i>
					      <span>说明</span>
					    </template>
					  	<el-menu-item index="explain">说明</el-menu-item>
					  </el-submenu>
				    </el-menu>
					
				  </el-col>
				  <el-col :span="20" style="min-height: 100%; overflow: auto;">
				  <keep-alive>
					<router-view></router-view>
				</keep-alive>
				</el-col>
				  </el-row>
				  
			
			
		</div>
	</div>
</template>

<script>
export default{
	data(){
		return{
			
		}
	},
	methods:{
		      handleOpen(key, keyPath) {
		        console.log(key, keyPath);
		      },
		      handleClose(key, keyPath) {
		        console.log(key, keyPath);
		      }
	}
}
</script>

<style lang="scss" scoped>
	.el-col-12{
		width: 16.66667%;
	}
</style>
